<template>
  <a-modal
    :title="title"
    :width="width"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel">
    <a-spin :spinning="confirmLoading">

      <a-form :form="form">
        <a-form-item v-show="false" :label=" $t('base.type') "  :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input v-decorator="[ 'type', validatorRules.type]" :placeholder="$t('base.pleaseEnter')"></a-input>
        </a-form-item>
        <a-row class="form-row" :gutter="12">
          <a-col :lg="12">
            <a-form-item :label=" $t('light.patternName') " :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input  v-decorator="[ 'patternName', validatorRules.patternName]" :placeholder="$t('base.pleaseEnter')"></a-input>
            </a-form-item>
          </a-col>
          <a-col :lg="10">
          </a-col>

          <a-col :lg="12">
            <a-form-item :label=" $t('light.automaticTimePeriod') " :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-dict-select-tag  v-decorator="['selfMotionYn', validatorRules.selfMotionYn]" :triggerChange="true" :placeholder="$t('base.pleaseChoose')"
                                  dictCode="sys_yn"/>
            </a-form-item>
          </a-col>
          <a-col :lg="10">
          </a-col>
        </a-row>




        <a-row class="form-row" :gutter="16">
          <a-col :lg="12">
            <a-row :gutter="24">
              <a-col :span="15">
                <a-form-item :label=" $t('light.sunriseTurnOffTime') " :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
                  <j-dict-select-tag v-decorator="['typeb', validatorRules.typeb]" :triggerChange="true"
                                     :placeholder="$t('base.pleaseChoose')"
                                     dictCode="glr_pattern_time"/>
                </a-form-item>
              </a-col>
              <a-col :span="9">
                <a-form-item :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
                  <j-dict-select-tag v-decorator="['timeb', validatorRules.timeb]" :triggerChange="true"
                                     :placeholder="$t('base.pleaseChoose')"
                                     dictCode="glr_gate_way_time"/>
                </a-form-item>
              </a-col>
            </a-row>

          </a-col>
          <a-col :lg="12">

            <a-row :gutter="24">
              <a-col :span="15">
                <a-form-item :label=" $t('light.sunsetTurnOnTime') " :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
                  <j-dict-select-tag v-decorator="['typec', validatorRules.typec]" :triggerChange="true"
                                     :placeholder="$t('base.pleaseChoose')"
                                     dictCode="glr_pattern_time"/>
                </a-form-item>
              </a-col>
              <a-col :span="9">
                <a-form-item :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
                  <j-dict-select-tag v-decorator="['timec', validatorRules.timec]" :triggerChange="true"
                                     :placeholder="$t('base.pleaseChoose')"
                                     dictCode="glr_gate_way_time"/>
                </a-form-item>
              </a-col>
            </a-row>
          </a-col>
        </a-row>

        <a-row class="form-row" :gutter="16">

          <a-col :lg="12">
            <a-row :gutter="24">
              <a-col :span="15">
            <a-form-item :label=" $t('light.period1')" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
              <a-time-picker format="HH:mm" :minute-step="10" :second-step="10"  :allowClear="true" :inputReadOnly="true"  :placeholder="$t('base.pleaseChoose')"
                             v-decorator="[ 'commandTimea', validatorRules.commandTimea]" :trigger-change="true"
                             :disabledHours="getDisabledHours1"
                             :disabledMinutes="getDisabledMinutes1"
                             style="width: 100%" />
            </a-form-item>
              </a-col>
            <a-col :lg="9">
              <a-form-item  :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
              (00:00-03:00)
              </a-form-item>
            </a-col>
            </a-row>
          </a-col>
          <a-col :lg="12">
            <a-form-item :label=" $t('light.brightness') " :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input-number v-decorator="[ 'brightValuea', validatorRules.brightValuea]" :min=minbrightValue :max=maxbrightValue :placeholder="$t('base.pleaseEnter')" style="width: 100%"/>
            </a-form-item>
          </a-col>
        </a-row>


        <a-row class="form-row" :gutter="16">
          <a-col :lg="12">
            <a-row :gutter="24">
              <a-col :span="15">
            <a-form-item :label=" $t('light.period2') " :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
              <a-time-picker format="HH:mm" :minute-step="10" :second-step="10"  :allowClear="true" :inputReadOnly="true"  :placeholder="$t('base.pleaseChoose')"
                             v-decorator="[ 'commandTimeb', validatorRules.commandTimeb]" :trigger-change="true"
                             :disabledHours="getDisabledHours2"
                             :disabledMinutes="getDisabledMinutes2"
                             style="width: 100%" />
            </a-form-item>
              </a-col>
              <a-col :span="9">
                <a-form-item  :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
                (03:01-08:00)
                </a-form-item>
              </a-col>
            </a-row>
          </a-col>
          <a-col :lg="12">
            <a-form-item :label=" $t('light.brightness') " :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-bind:readOnly="isReadOnly" v-decorator="[ 'brightValueb', validatorRules.brightValueb]" ></a-input>
            </a-form-item>
          </a-col>
        </a-row>

        <a-row class="form-row" :gutter="16">
          <a-col :lg="12">
            <a-row :gutter="24">
              <a-col :span="15">
            <a-form-item :label=" $t('light.period3') " :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
              <a-time-picker format="HH:mm" :minute-step="10" :second-step="10"  :allowClear="true" :inputReadOnly="true"  :placeholder="$t('base.pleaseChoose')"
                             v-decorator="[ 'commandTimec', validatorRules.commandTimec]" :trigger-change="true"
                             :disabledHours="getDisabledHours3"
                             :disabledMinutes="getDisabledMinutes3"
                             style="width: 100%" />
            </a-form-item>
              </a-col>
              <a-col :span="9">
                <a-form-item  :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
                  (17:00-20:00)
                </a-form-item>
              </a-col>
            </a-row>
          </a-col>
          <a-col :lg="12">
            <a-form-item :label=" $t('light.brightness') " :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input-number v-decorator="[ 'brightValuec', validatorRules.brightValuec]" :min=minbrightValue :max=maxbrightValue :placeholder="$t('base.pleaseEnter')" style="width: 100%"/>
            </a-form-item>
          </a-col>
        </a-row>

        <a-row class="form-row" :gutter="16">
          <a-col :lg="12">
            <a-row :gutter="24">
              <a-col :span="15">
            <a-form-item :label=" $t('light.period4') " :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
              <a-time-picker format="HH:mm" :minute-step="10" :second-step="10"  :allowClear="true" :inputReadOnly="true"  :placeholder="$t('base.pleaseChoose')"
                             v-decorator="[ 'commandTimed', validatorRules.commandTimed]" :trigger-change="true"
                             :disabledHours="getDisabledHours4"
                             :disabledMinutes="getDisabledMinutes4"
                             style="width: 100%" />
            </a-form-item>
              </a-col>
              <a-col :span="9">
                <a-form-item  :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
                  (20:01-22:00)
                </a-form-item>
              </a-col>
            </a-row>
          </a-col>
          <a-col :lg="12">
            <a-form-item :label=" $t('light.brightness') " :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input-number v-decorator="[ 'brightValued', validatorRules.brightValued]" :min=minbrightValue :max=maxbrightValue :placeholder="$t('base.pleaseEnter')" style="width: 100%"/>
            </a-form-item>
          </a-col>
        </a-row>

        <a-row class="form-row" :gutter="16">
          <a-col :lg="12">
            <a-row :gutter="24">
              <a-col :span="15">
            <a-form-item :label=" $t('light.period5') " :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
              <a-time-picker format="HH:mm" :minute-step="10" :second-step="10"  :allowClear="true" :inputReadOnly="true"  :placeholder="$t('base.pleaseChoose')"
                             v-decorator="[ 'commandTimee', validatorRules.commandTimee]" :trigger-change="true"
                             :disabledHours="getDisabledHours5"
                             :disabledMinutes="getDisabledMinutes5"
                             style="width: 100%" />
            </a-form-item>
              </a-col>
              <a-col :span="9">
                <a-form-item  :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
                  (22:01-23:59)
                </a-form-item>
              </a-col>
            </a-row>
          </a-col>
          <a-col :lg="12">
            <a-form-item :label=" $t('light.brightness') " :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input-number v-decorator="[ 'brightValuee', validatorRules.brightValuee]" :min=minbrightValue :max=maxbrightValue :placeholder="$t('base.pleaseEnter')" style="width: 100%"/>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>

    import {httpAction} from '@/api/manage'
    import pick from 'lodash.pick'
    import {validateDuplicateValue} from '@/utils/util'
    import JDate from '@/components/jeecg/JDate'
    import moment from 'moment';

    export default {
        name: "GlrPatternModal",
        components: {
            JDate
        },
        data() {
            return {
                form: this.$form.createForm(this),
                title: "操作",
                width: 950,
                visible: false,
                minbrightValue:0,
                maxbrightValue:100,
                disableMixinCreated:true,
                model: {},
                isReadOnly:true,
                labelCol: {
                    xs: {span: 24},
                    sm: {span: 5},
                },
                wrapperCol: {
                    xs: {span: 24},
                    sm: {span: 16},
                },
                confirmLoading: false,
                validatorRules: {
                    patternName: {
                        rules: [
                            {required: true, message: this.$t('base.pleaseEnter')+'!'},
                        ]
                    },
                    commandTimea: {
                        rules: [
                            {required: true, message: this.$t('base.pleaseEnter')+'!'},
                        ]
                    },
                    brightValuea: {
                        rules: [
                            {required: true, message: this.$t('base.pleaseEnter')+'!'},
                        ]
                    },
                    commandTimeb: {
                        rules: [
                            {required: true, message: this.$t('base.pleaseEnter')+'!'},
                        ]
                    },
                    brightValueb: {
                        rules: [
                            {required: true, message: this.$t('base.pleaseEnter')+'!'},
                        ]
                    },
                    commandTimec: {
                        rules: [
                            {required: true, message: this.$t('base.pleaseEnter')+'!'},
                        ]
                    },
                    brightValuec: {
                        rules: [
                            {required: true, message: this.$t('base.pleaseEnter')+'!'},
                        ]
                    },
                    commandTimed: {
                        rules: [
                            {required: true, message: this.$t('base.pleaseEnter')+'!'},
                        ]
                    },
                    brightValued: {
                        rules: [
                            {required: true, message: this.$t('base.pleaseEnter')+'!'},
                        ]
                    },
                    commandTimee: {
                        rules: [
                            {required: true, message: this.$t('base.pleaseEnter')+'!'},
                        ]
                    },
                    brightValuee: {
                        rules: [
                            {required: true, message: this.$t('base.pleaseEnter')+'!'},
                        ]
                    },
                    typeb: {
                        rules: [
                            {required: true, message: this.$t('base.pleaseEnter')+'!'},
                        ]
                    },
                    typec: {
                        rules: [
                            {required: true, message: this.$t('base.pleaseEnter')+'!'},
                        ]
                    },
                    sysCompanyCode: {
                        rules: []
                    },
                },
                url: {
                    add: "/glr/glrPattern/add",
                    edit: "/glr/glrPattern/edit",
                }
            }
        },
        created() {
        },
        methods: {
            add() {
                this.edit({});
            },
            edit(record) {
                this.form.resetFields();
                this.model = Object.assign({}, record);
                this.model.brightValueb=0;
                if(!this.model.id){
                    this.model.type='2';
                }else{
                    this.model.commandTimea=moment(this.model.commandTimea,'HH:mm');
                    this.model.commandTimeb=moment(this.model.commandTimeb,'HH:mm');
                    this.model.commandTimec=moment(this.model.commandTimec,'HH:mm');
                    this.model.commandTimed=moment(this.model.commandTimed,'HH:mm');
                    this.model.commandTimee=moment(this.model.commandTimee,'HH:mm');
                }
                this.visible = true;
                this.$nextTick(() => {
                    this.form.setFieldsValue(pick(this.model,'timec','timeb','type','patternName', 'commandTimea', 'brightValuea', 'commandTimeb', 'brightValueb', 'commandTimec', 'brightValuec', 'commandTimed', 'brightValued', 'commandTimee', 'brightValuee', 'typeb', 'typec', 'sysCompanyCode'))
                })
            },
            close() {
                this.$emit('close');
                this.visible = false;
            },
            handleOk() {
                const that = this;
                // 触发表单验证
                this.form.validateFields((err, values) => {
                    if (!err) {
                        that.confirmLoading = true;
                        let httpurl = '';
                        let method = '';
                        if (!this.model.id) {
                            httpurl += this.url.add;
                            method = 'post';
                        } else {
                            httpurl += this.url.edit;
                            method = 'put';
                        }

                        var commandTimea=that.form.getFieldValue("commandTimea");
                        commandTimea=moment(commandTimea).format("HH:mm");
                        values.commandTimea=commandTimea;

                        var commandTimeb=that.form.getFieldValue("commandTimeb");
                        commandTimeb=moment(commandTimeb).format("HH:mm");
                        values.commandTimeb=commandTimeb;

                        var commandTimec=that.form.getFieldValue("commandTimec");
                        commandTimec=moment(commandTimec).format("HH:mm");
                        values.commandTimec=commandTimec;

                        var commandTimed=that.form.getFieldValue("commandTimed");
                        commandTimed=moment(commandTimed).format("HH:mm");
                        values.commandTimed=commandTimed;

                        var commandTimee=that.form.getFieldValue("commandTimee");
                        commandTimee=moment(commandTimee).format("HH:mm");
                        values.commandTimee=commandTimee;

                        let formData = Object.assign(this.model, values);
                        console.log("表单提交数据", formData)
                        httpAction(httpurl, formData, method).then((res) => {
                            if (res.success) {
                                //that.$message.success(res.message);
                                that.$message.success(that.$t('base.operationSuccessful'));
                                that.$emit('ok');
                            } else {
                                //that.$message.warning(res.message);
                                that.$message.warning(that.$t('base.operationFailed'));
                            }
                        }).finally(() => {
                            that.confirmLoading = false;
                            that.close();
                        })
                    }

                })
            },
            handleCancel() {
                this.close()
            },
            popupCallback(row) {
                this.form.setFieldsValue(pick(row, 'patternName', 'commandTimea', 'brightValuea', 'commandTimeb', 'brightValueb', 'commandTimec', 'brightValuec', 'commandTimed', 'brightValued', 'commandTimee', 'brightValuee', 'typeb', 'typec', 'sysCompanyCode'))
            },


          getDisabledHours1 () {
            let hours = []
            hours.push(4)
            hours.push(5)
            hours.push(6)
            hours.push(7)
            hours.push(8)
            hours.push(9)
            hours.push(10)
            hours.push(11)
            hours.push(12)
            hours.push(13)
            hours.push(14)
            hours.push(15)
            hours.push(16)
            hours.push(17)
            hours.push(18)
            hours.push(19)
            hours.push(20)
            hours.push(21)
            hours.push(22)
            hours.push(23)
            return hours
          },
          getDisabledMinutes1 (selectedHour) {
            let minutes = []
            if (selectedHour == 3) {
              minutes.push(10)
              minutes.push(20)
              minutes.push(30)
              minutes.push(40)
              minutes.push(50)
            }
            return minutes
          },
          getDisabledHours2 () {
            let hours = []
            hours.push(0)
            hours.push(1)
            hours.push(2)
            hours.push(9)
            hours.push(10)
            hours.push(11)
            hours.push(12)
            hours.push(13)
            hours.push(14)
            hours.push(15)
            hours.push(16)
            hours.push(17)
            hours.push(18)
            hours.push(19)
            hours.push(20)
            hours.push(21)
            hours.push(22)
            hours.push(23)
            return hours
          },
          getDisabledMinutes2 (selectedHour) {
            let minutes = []
            if (selectedHour == 8) {
              minutes.push(10)
              minutes.push(20)
              minutes.push(30)
              minutes.push(40)
              minutes.push(50)
            }
            return minutes
          },
          getDisabledHours3 () {
            let hours = []
            hours.push(0)
            hours.push(1)
            hours.push(2)
            hours.push(3)
            hours.push(4)
            hours.push(5)
            hours.push(6)
            hours.push(7)
            hours.push(8)
            hours.push(9)
            hours.push(10)
            hours.push(11)
            hours.push(12)
            hours.push(13)
            hours.push(14)
            hours.push(15)
            hours.push(16)
            hours.push(21)
            hours.push(22)
            hours.push(23)
            return hours
          },
          getDisabledMinutes3 (selectedHour) {
            let minutes = []
            if (selectedHour == 20) {
              minutes.push(10)
              minutes.push(20)
              minutes.push(30)
              minutes.push(40)
              minutes.push(50)
            }
            return minutes
          },
          getDisabledHours4 () {
            let hours = []
            hours.push(0)
            hours.push(1)
            hours.push(2)
            hours.push(3)
            hours.push(4)
            hours.push(5)
            hours.push(6)
            hours.push(7)
            hours.push(8)
            hours.push(9)
            hours.push(10)
            hours.push(11)
            hours.push(12)
            hours.push(13)
            hours.push(14)
            hours.push(15)
            hours.push(16)
            hours.push(17)
            hours.push(18)
            hours.push(19)
            hours.push(23)
            return hours
          },
          getDisabledMinutes4 (selectedHour) {
            let minutes = []
            if (selectedHour == 22) {
              minutes.push(10)
              minutes.push(20)
              minutes.push(30)
              minutes.push(40)
              minutes.push(50)
            }
            return minutes
          },
          getDisabledHours5 () {
            let hours = []
            hours.push(0)
            hours.push(1)
            hours.push(2)
            hours.push(3)
            hours.push(4)
            hours.push(5)
            hours.push(6)
            hours.push(7)
            hours.push(8)
            hours.push(9)
            hours.push(10)
            hours.push(11)
            hours.push(12)
            hours.push(13)
            hours.push(14)
            hours.push(15)
            hours.push(16)
            hours.push(17)
            hours.push(18)
            hours.push(19)
            hours.push(20)
            hours.push(21)
            return hours
          },
          getDisabledMinutes5 (selectedHour) {
            let minutes = []
            if (selectedHour == 24) {
              minutes.push(10)
              minutes.push(20)
              minutes.push(30)
              minutes.push(40)
              minutes.push(50)
            }
            return minutes
          },
        }
    }
</script>